<template>
  <BaseMainSlot>
    <!-- 这页面 -->
    <template v-slot:zhactbar>
      <ActionBar
        :page-no="102"
        :add-active="addActive"
        :del-active="delActive"
        :cancel-active="cancelActive"
        :has-edit="false"
        :has-del="false"
        :has-save="false"
        :save-active="saveActive"
        @add="add"
        @cancel="cancel"
        @del="del"
      />
    </template>
    <template v-slot:boxleft>
      <div class="zhtabletitle">已有农业类型</div>
      <el-table
        v-loading="loading"
        highlight-current-row
        :data="tableData"
        stripe
        border
        height="85%"
        @row-click="handleEdit"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="farmingTypeName" label="农业类型名称" />
        <!-- <el-table-column prop="description" label="农业类型描述" /> -->
        <el-table-column width="200" label="操作">
          <template
            v-if="scope.row.organizationFarmingTypeMapperId"
            slot-scope="scope"
          >
            <el-button
              v-if="judgePermission(102,'delete')"
              class="text-btn-cursor cursor-add"
              type="text"
              size="small"
              @click="addImg(scope.row.farmingTypeNo)"
            ><i class="el-icon-document-add"></i> 添加图片</el-button>
            <el-button
              v-if="judgePermission(102,'delete')"
              class="text-btn-cursor cursor-delete"
              type="text"
              size="small"
              @click="handleDelete(scope.row.organizationFarmingTypeMapperId)"
            ><i class="el-icon-delete"></i> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :page-size="pageSize"
        :current-page="currentPage"
        :total-size="totalSize"
        @changePageSize="changePageSize"
        @changeCurrentPage="changeCurrentPage"
      />
      <el-dialog
        title="添加物联背景图片"
        :visible.sync="dialogImgFormVisible"
        width="400px"
      >
        <el-form
          ref="formData"
          label-position="left"
          :model="formData"
          :rules="rules"
          class="el-form"
        >
          <el-form-item
            label="添加物联背景图片: "
            prop="dataItemId"
            class="w100p"
            label-width="20px"
          >
            <uploadimagesVue
              :can-input="true"
              :post-url="InImgUrl"
              @child-event="setimgurl"
              @ika-img="setimgname"
            />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="dialogImgFormVisible = false">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="editImg">确 定</el-button>
        </span>
      </el-dialog>
    </template>
    <template v-slot:boxright>
      <div class="zhtabletitle">所有农业类型</div>
      <el-table
        v-loading="loadingtwo"
        highlight-current-row
        :data="tableDatatwo"
        stripe
        border
        height="85%"
        @selection-change="handleSelectionChangetwo"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="farmingTypeName" label="农业类型名称" />
        <el-table-column prop="description" label="农业类型描述" />
      </el-table>
      <Pagination
        :page-size="pageSizetwo"
        :current-page="currentPagetwo"
        :total-size="totalSizetwo"
        @changePageSize="changePageSizetwo"
        @changeCurrentPage="changeCurrentPagetwo"
      />
      <el-dialog
        title="添加农业类型名称"
        :visible.sync="dialogFormVisible"
        width="400px"
      >
        <el-form
          ref="formData"
          label-position="left"
          :model="formData"
          :rules="rules"
          class="el-form"
        >
          <el-form-item
            label="农业类型名称"
            prop="dataItemId"
            class="w100p"
          >
            <el-input v-model="formData.farmingTypeName" clearable />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="cancel">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar/index";
import Pagination from "@/components/Pagination";
import nowpagereq from "@/api/basic-info-manage/agricultural-type-manage";
import BaseMainSlot from "@/components/BaseMainSlot/basezuoyou.vue";
import uploadimagesVue from "@/components/uploadimage/uploadimages.vue";
import { mymixin } from "@/utils/mixins";
import { mapGetters } from 'vuex';
// import { getToken } from '@/utils/auth';
export default {
  name: "AgriculturalTypeManagement",
  components: { ActionBar, Pagination, BaseMainSlot, uploadimagesVue },
  mixins: [mymixin],
  data() {
    return {
      // ----表格二号----
      loadingtwo: true,
      // 当前页
      currentPagetwo: 1,
      // 每页的数据条数
      pageSizetwo: 10,
      // 总条数
      totalSizetwo: 0,
      // 表格二号数据
      tableDatatwo: [],
      // 是否能输入
      // -------
      canInput: false,
      rules: {},
      // 选中的数据项数组 employeeId组成 (此数组最多为一个)
      nowselectedList: [],
      farmingTypeNo: undefined,
      dialogImgFormVisible: false,
      InImgUrl: '',
      productPicture: ''
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created() {
    this.getTableDataListone();
    // 获取表格数据
    this.getTableDataListtwo();
  },
  mounted() {},
  methods: {
    // 获取当前拥有类型表格
    getTableDataListone() {
      this.loading = true;
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        organizationNo: sessionStorage.organizationNo,
        farming: 'PLANT'
      };
      nowpagereq.ownFarmingTypelist(params).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.$message.error("当前农业类型表格获取失败");
        }
        let data = res.data;
        // 赋值总条数
        this.totalSize = data.length;
        // 赋值数组
        this.tableData = data;
        this.addblankmet();
        this.resetActionBar();
        this.addActive = false;
      });
    },
    // 获取所有农业类型表格
    getTableDataListtwo() {
      this.loadingtwo = true;
      nowpagereq
        .getbaseFarmingTypeList({
          page: this.currentPagetwo,
          size: this.pageSizetwo,
          entity: {
            organizationNo: sessionStorage.organizationNo,
            farming: 'PLANT'
          }
        })
        .then((res) => {
          this.loadingtwo = false;
          if (res.code === 0) {
            this.$message.error("所有农业类型表格获取失败");
          }
          let data = res.data;
          // 赋值总条数
          this.totalSizetwo = data.totalElements;
          // 赋值数组
          this.tableDatatwo = data.content;
          if (this.tableDatatwo.length < this.pageSizetwo) {
            let havline = this.tableDatatwo.length % this.pageSizetwo;
            if (havline < this.pageSizetwo) {
              const remain = this.pageSizetwo - havline;
              for (var i = 0; i < remain; i++) {
                this.tableDatatwo.push({
                  index: i + this.tableDatatwo.length - 1
                });
              }
            }
          }
          this.resetActionBar();
          this.addActive = false;
        });
    },
    search() {
      this.currentPage = 1;
      this.getTableDataListone();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.getTableDataListone();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.getTableDataListone();
    },
    changePageSizetwo(pageSize) {
      this.pageSizetwo = pageSize;
      this.getTableDataListtwo();
    },
    changeCurrentPagetwo(currentPage) {
      this.currentPagetwo = currentPage;
      this.getTableDataListtwo();
    },
    handleSelectionChange(list) {
      this.nowselectedList = [];
      this.nowselectedList = list.map((item) => {
        return item.id;
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) { this.delActive = true; } else this.delActive = false;
    },
    handleEdit(row) {
      if (row) {
        this.formData = { ...row }
      }
    },
    handleSelectionChangetwo(list) {
      this.nowselectedList = [];
      // let id = getToken('companyId')
      // organizationNo
      this.nowselectedList = list.map((item) => {
        return {
          description: item.description,
          farmingTypeNo: item.farmingTypeNo,
          farmingTypeName: item.farmingTypeName,
          organizationNo: sessionStorage.getItem("organizationNo")
        };
      });
      if (this.nowselectedList && this.nowselectedList.length > 0) { this.addActive = true; } else this.addActive = false;
    },
    // delmessage() {
    //   if (this.nowChanceStau === 'del') {
    //     nowpagereq.delFarmingTypelist(this.nowselectedList).then(
    //       res => {
    //         if (res.code === 1) {
    //           this.getTableDataListone()
    //           this.$message.success('删除成功')
    //         } else {
    //           this.$message.error('删除失败')
    //         }
    //       }
    //     )
    //   }
    // },
    handleDelete(noticeConfigNo) {
      this.$confirm("是否删除农业类型？", "删除农业类型", {
        distinguishCancelAndClose: true,
        confirmButtonClass: "btnFalses",
        confirmButtonText: "删除",
        cancelButtonText: "取消删除"
      })
        .then(() => {
          nowpagereq.delFarmingTypelist(noticeConfigNo).then((res) => {
            if (res.code === 1) {
              this.$message.success("删除成功");
              this.getTableDataListone();
            } else {
              this.$message.error("删除失败");
            }
          });
        })
        .catch((action) => {
          // this.$message({
          //   type: 'info',
          //   message: action === 'cancel'
          //     ? '取消删除'
          //     : '停留在当前页面'
          // })
        });
    },
    addImg(e) {
      this.farmingTypeNo = e
      this.dialogImgFormVisible = true;
    },
    setimgurl(e) {
      if (e) {
        this.productPicture = e;
      }
    },
    setimgname(e) {
      this.formData.pictureName = e;
    },
    add() {
      this.formData = this.nowselectedList[0]
      this.dialogFormVisible = true;
    },
    save() {
      nowpagereq.addFarmingTypelist({
        ...this.formData,
        farming: 'PLANT'
      }).then((res) => {
        if (res.code === 1) {
          this.getTableDataListone();
          this.$message.success("添加成功");
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    // 添加物联背景图片
    editImg() {
      nowpagereq.editFarmingTypelist({
        ...this.formData,
        image: this.productPicture,
        farming: 'PLANT'
      }).then((res) => {
        if (res.code === 1) {
          this.getTableDataListone();
          this.dialogImgFormVisible = false
          this.$message.success("添加成功");
        } else {
          this.$message.error("添加失败");
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.zhtabletitle {
  color: #31f7dd;
  margin-bottom: 10px;
}
// ::v-deep .el-message-box__wrapper {
//       background: red !important;
//   .el-message-box {
//     .btnFalses {
//       background: red !important;
//     }
//   }
// }
</style>
